<template>
  <div class="login">
    <div class="logoBar">
      <div class="logo">
        <div>
          <img src="../assets/logo.png" />
        </div>

      </div>
    </div>
    <div class="loginCard">
      <a-card style="width: 500px;" class="login-box">

          <p class="login-title" style="">登录</p>

        <a-form
          :model="formData"
          ref="formRef"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 17 }"
          autocomplete="off"
          style="margin-top: 20px;text-align:center;"
          @keyup.enter="handleLogin"
        >
		  <div class="form-item-box">
			  <a-input class="login-input" v-model:value="formData.account" :rules="[{ required: true, message: '请输入用户名' }]" placeholder="用户名" />
			  <a-input-password  class="login-input"  v-model:value="formData.password" :rules="[{ required: true, message: '请输入密码' }]" placeholder="账户密码" />
			  <a-row align="middle">
			    <a-col :span="10">
			      <a-input class="login-input" v-model:value="formData.inputCode" :rules="[{ required: true, message: '请输入验证码' }]" placeholder="验证码" />
			    </a-col>
			    <a-col :span="7" :offset="1">
			      <img
			        v-if="randCodeData.requestCodeSuccess"
			        style="margin-top: 2px;width:100%;height:42px; max-width: initial"
			        :src="randCodeData.randCodeImage"
			        @click="handleChangeCheckCode"
			      />
			      <img v-else style="margin-top: 2px; width:100%;height:42px;max-width: initial"
			           src="../assets/img/checkcode.png"
			           @click="handleChangeCheckCode" />
			    </a-col>
          <a-col :span="2" :offset="1">
            <a-button size="small" danger @click="toRegister">注册账号</a-button>
          </a-col>
			  </a-row>
		  </div>


          <a-form-item :wrapper-col="{ offset: 2, span: 20 }" style="margin-top:35px">
            <a-button type="primary" size="large" class="login-sub-btn" style="width: 100%" @click="handleLogin"
                      :loading="loading">点击登录
            </a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>

  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { getCodeInfo, login } from "@/api/login";
import router from "@/router";
import { message } from "ant-design-vue";
import { useWebStore } from "@/store";

const webStore = useWebStore();

const loading = ref(false);
const formRef = ref<any>();

const formData = reactive({
  account: "",
  password: "",
  inputCode: ""
});

const randCodeData = reactive<any>({
  randCodeImage: "",
  requestCodeSuccess: false,
  checkKey: null
});

function handleChangeCheckCode() {
  formData.inputCode = "";
  randCodeData.checkKey = 1629428467008; //new Date().getTime();
  getCodeInfo(randCodeData.checkKey).then((res: any) => {
    randCodeData.randCodeImage = res.result;
    randCodeData.requestCodeSuccess = true;
  });
}

async function handleLogin() {
  try {
    await formRef.value.validate();
    loading.value = true;
    const data: any = await login(
      {
        password: formData.password,
        username: formData.account,
        captcha: formData.inputCode,
        checkKey: randCodeData.checkKey
      }
    );
    if (data.success) {
      webStore.userLogin({ ...data.result.userInfo });
      message.success("登录成功");
      await loginAfter(data);
    } else {
      message.error(data.message);
    }
  } catch (error) {
    handleChangeCheckCode();
  } finally {
    loading.value = false;
  }
}

// 注册、登陆成功后设置相关逻辑
async function loginAfter(data) {
  localStorage.setItem("token", data.result.token);
  const lastVisitRoute = webStore.getLastVisitRoute;
  if (lastVisitRoute) {
    await router.push(lastVisitRoute);
    webStore.setLastVisitRoute({ lastVisitRoute: "" });
  } else {
    await router.push("/");
  }
}

//初始化验证码
onMounted(() => {
  handleChangeCheckCode();
});

function toRegister() {
  router.push({ path: `/register` });
}
</script>
<style lang="less" scoped>
.login {
  background: url(../assets/img/login.jpg) no-repeat center center / cover;
}

.logoBar {
  color: #FFFFFF;
  position: absolute;
  left: 15%;
  top: 3%;
}

.logo {
  display: flex;
  justify-content: flex-start;
  align-items: center
}
.ant-card-head{
	min-height:45px;
	border-bottom-width:0px;
}
.login-title{
	text-align: center;color:#347cee;font-size:28px;margin-bottom:0px;
}
img {
  // width: 34px;
  height: 90px;
}

.title {
  margin-left: 10px;
  font-size: 22px;
}

.loginCard {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box{
	  position:absolute;
	  left:10%;
	  border-width:0px;
	  background-color: rgba(255, 255, 255, 0);
  }
}

.foot {
  color: #FFFFFF;
  position: absolute;
  left: 5%;
  bottom: 10%;
}

.flex_ba_img {
  margin-right: 6px;

  img {
    height: auto;
    display: block;
  }
}
.form-item-box{
	.login-input{
		margin-bottom:10px;
		height:42px;
		line-height:42px;
		border-radius:21px;
	}
}
.login-sub-btn{
	letter-spacing: 10px;
	font-size:18px;
	font-weight:600;
	text-indent:5px;
	height:42px;
	background-image: linear-gradient(45deg, #3f34db, #527ff9);
	border-radius:22px;
}

[class*=" ant-flex"] {
  font-size: 16px;
}
</style>
